<template>
  <div>
    <button @click="decrement(10)">-</button>
    {{count}}
    <button @click="increment">+</button>
    <br>
    <div v-if="show">hello</div>
    <button @click="changeShow">show</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
import { INCREMENT } from '../store/mutationTypes'
export default {
  // 总结状态：
  // 1、data: 组件内部的状态
  // 2、props: 父组件传递进来的状态（外部状态）
  // 3、state: Vuex Store 存储的状态（外部状态）

  data() {
    return {
      num: 100
    }
  },

  mounted() {
    // console.log(this.$store.state.count)
    // let total = [4, 5, 6, 7, 7].reduce((sum, item) => {
    //   return sum + item
    // }, 0)
    // console.log(total)

    setTimeout(() => {
      this.num = 200
    }, 5000)
  },

  methods: {
    //increment() {
      // this.$store.commit(INCREMENT, 5)
      //this.$store.dispatch(INCREMENT, 5)
      // this.$store.dispatch({
      //   type: 'increment',
      //   data: 5
      // })

      // setInterval(() => {
      //   this.$store.commit('increment')
      // }, 1000)
    //},
    // decrement() {
    //   // this.$store.dispatch('decrement')
    //   this.$store.commit('decrement')
    // }
    // ...mapActions([INCREMENT]),
    increment() {
      this.$store.dispatch(INCREMENT, 5)
    },
    async changeShow() {
      // dispatch 返回的是Promise,可以在上一个异步action完成以后再dispatch下一个action
      await this.$store.dispatch('changeShow')
      // this.$store.dispatch()
    },
    ...mapMutations(['decrement'])
  },

  computed: {
    ...mapState({
      count(state) {
        return state.count
      },
      show: state => state.show
    }),

    mycomputed() {
      return (n) => {
        return this.num * n
      }
    },

    dc() {
      return this.$store.getters.doubleCount(5)
    },

    ...mapGetters(['tribbleCount'])

    // doubleCount() {
    //   return this.$store.state.count * 2
    // }
  }
}
</script>

<style lang='stylus' scoped>

</style>